<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-publica.xhtml">
    <ui:define name="cabecera">
        <title>Fauna de El Salvador - Peces</title>
    </ui:define>
    <ui:define name="contenido">
        <center>
            <p:panel id="pezPnl" 
                    header="Ictiología" 
                    style="font-size: 120%; text-align: center; width:80%; min-width:800px !important;">
                    <p id="texto">
                        La ictiología es una rama de la zoología dedicada al estudio 
                        de los peces. Esta incluye los osteictios 
                        (peces óseos), los condrictios (peces cartilaginosos) tales 
                        como el tiburón y la raya y los agnatos 
                        (peces sin mandíbula). Se estima que hay alrededor de 32,200
                        especies descritas1 y que cada año son descritas 
                        oficialmente 250 nuevas especies. La dificultad en la 
                        clasificación radica en la gran variedad que han alcanzado 
                        durante el proceso evolutivo y la accesibilidad de los 
                        humanos al medio acuático. Por otra parte la ictiología 
                        además se ocupa de la biología y comportamiento de los peces.
                        <br/><br/>
                        La práctica de la ictiología está estrechamente emparentada 
                        con la biología marina, la limnología y la oceanografía.   
                    </p>
                <p:spacer height="10"/>
                <h:form id="pezFrm">      
                    <p:dataTable id="pezTbl" 
                                var="pez"
                                rows="10"  
                                selectionMode="single"
                                paginator="true" 
                                style="padding: 0 40px"
                                paginatorPosition="bottom"
                                value="#{pezBean.listaPeces}"
                                rowKey="#{pez.nombrecientifico}"
                                emptyMessage="No hay registros disponibles.">
                        <f:facet name="header">  
                            <h:outputText value="Listado de Pesces" 
                                        style="font-size: 115%"/>  
                        </f:facet>
                        <p:column headerText="Nombre científico"
                                filterBy="#{pez.nombrecientifico}" 
                                sortBy="#{pez.nombrecientifico}" 
                                filterMatchMode="contains"
                                style="font-size: 110%">  
                            <h:outputText id="nombrecientificoTxt" 
                                        value="#{pez.nombrecientifico}" />  
                        </p:column>
                        <p:column headerText="Nombre común"
                                filterBy="#{pez.nombrecomun}" 
                                sortBy="#{pez.nombrecomun}" 
                                filterMatchMode="contains"
                                style="font-size: 110%">  
                            <h:outputText id="nombrecomunTxt" 
                                        value="#{pez.nombrecomun}" />
                        </p:column>                      
                        <p:column headerText="Nombres conocidos"
                                filterBy="#{pezBean.getSinonimias(pez)}" 
                                sortBy="#{pezBean.getSinonimias(pez)}" 
                                filterMatchMode="contains"
                                style="font-size: 110%">  
                            <h:outputText id="nombreantiguoTxt" 
                                        value="#{pezBean.getSinonimias(pez)}" />  
                        </p:column> 
                        <p:column headerText="Detalles"
                                styleClass="columna">
                            <p:button title="Detalle" 
                                    outcome="animal"
                                    icon="ui-icon-search">
                                <f:param name="animal" 
                                            value="#{pez.codigoanimal}" />
                            </p:button>
                        </p:column>
                    </p:dataTable>
                </h:form>
            </p:panel>
        </center>
    </ui:define>  
</ui:composition>

